<template>
	<view class="index" :style="{'backgroundImage':'url('+arr[nmb]+')'}">
		<!-- <view class="common" v-if="imgUrl"> -->
			<!-- #ifdef MP-WEIXIN -->
<!-- 			<u-navbar>
				<view class="u-nav-slot" slot="left">
					<u-search placeholder="请输入活动名称" v-model="keyword" :clearabled="true" :showAction="false"
						:inputStyle="{ width: '200px' }" @search="Search" @clear="Search"></u-search>
				</view>
			</u-navbar> -->
			<!-- <adcustom v-if="ad && ad.mbad_index_status == 1"></adcustom> -->
			<!-- #endif -->
			<!-- #ifdef H5 -->
<!-- 			<u-search placeholder="请输入活动名称" v-model="keyword" :clearabled="true" :showAction="false" @search="Search"
				@clear="Search"></u-search> -->
			<!-- #endif -->
			<!-- <view class="banner">
				<swiper circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
					:indicator-active-color="color_value">
					<swiper-item v-for="(item, index) in banner" :key="index" @click="link(item.link)">
						<image class="banner-img" :src="item.image" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<u-scroll-list v-if="nav" :indicatorActiveColor="color_value" :indicator="nav[0].length > 6 ? true : false">
				<view class="scroll-list">
					<view class="scroll-list__line" v-for="(item, index) in nav" :key="index">
						<block v-for="(item1, index1) in item" :key="index1">
							<view class="scroll-list__line__item" v-if="item1.link && item1.link.open_type != 'contact'"
								:class="[index1 === item.length - 1 && 'scroll-list__line__item--no-margin-right']"
								@click="link(item1.link)">
								<image class="scroll-list__line__item__image" :src="item1.image" mode=""></image>
								<text class="scroll-list__line__item__text"
									style="margin-top: 0;">{{ item1.name }}</text>
							</view> -->
							<!-- #ifdef MP-WEIXIN -->
							<!-- <view class="scroll-list__line__item"
								:class="[index1 === item.length - 1 && 'scroll-list__line__item--no-margin-right']"
								style="position: relative;" v-else>
								<button open-type="contact" class="u-reset-button"
									style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;"></button>
								<image class="scroll-list__line__item__image" :src="item1.image" mode=""></image>
								<text class="scroll-list__line__item__text"
									style="margin-top: 0;">{{ item1.name }}</text>
							</view> -->
							<!-- #endif -->
				<!-- 		</block>
					</view>
				</view> -->
			<!-- </u-scroll-list> -->

			<!-- #ifdef MP-WEIXIN -->
			<!-- <ad :unit-id="ad.index_banner" v-if="ad.index_banner" ad-intervals="30"></ad> -->
			<!-- #endif -->
<!-- 			<block v-if="vote">
				<u-row :customStyle="{ height: '50px' }">
					<u-col span="0.3">
						<u-gap :bgColor="color_value" :customStyle="{ width: '3px' }"></u-gap>
					</u-col>
					<u-col span="11.7">
						<u-text text="热门投票" lineHeight="40" :bold="true" size="18"></u-text>
					</u-col>
				</u-row>

				<view class="vote_item" v-for="(item, index) in vote" :key="index" @click="goto(item.id,item.mold)">
					<text class="vote_item_end">已结束</text>
					<image class="vote_img" :src="imgUrl + item.image" mode="scaleToFill" v-if="item.mold < 4"></image>
					<image class="vote_img" :src="system.domain+'/assets/addons/kzvote/img/pk.png'" mode="scaleToFill"
						style="height: 200px;" v-if="item.mold == 4"></image>
					<view class="vote_text">
						<u-text :text="item.name" :bold="true" :block="true" lines="1" size="18" lineHeight="40">
						</u-text>
						<view style="display: flex;margin-bottom: 10px;">
							<u-icon name="account-fill" size="18" :color="color_value"
								:label="item.person_count + '人参与'" labelSize="14" space="5"></u-icon>
							<text style="margin: 0 5px 0 10px;color: #606266;">|</text>
							<u-icon name="star-fill" size="18" :color="color_value" :label="item.count + '人投票'"
								labelSize="14" space="5"></u-icon>
						</view>
						<u-icon name="clock-fill" size="14" :color="color_value" :label="item.end_time_text + ' 结束'"
							labelSize="14"></u-icon>
					</view>
				</view>

				<u-back-top :scroll-top="scrollTop" icon="arrow-up" bottom="150"
					:customStyle="{ backgroundColor: 'rgba(0, 0, 0, 0.3)' }" :iconStyle="{ color: '#fff' }">
				</u-back-top>
			</block> -->
		<!-- </view> -->
		<!-- <view class="a">&emsp;&emsp;网络之星大赛，是一项全国性网络综合选评比赛，为优质商家,企业，个人提供一个多元化平台，提升知名度，打造新互联网传媒模式，赛事全程免费参加，公益性比赛，通过微信，抖音，美团，大众点评等多平台实现推流效果。</view> -->

		<tabbar></tabbar>

		<u-loading-page :image="system.domain+'/assets/addons/kzvote/img/loading.gif'" bgColor="#36c3e5" color="#36c3e5"
			iconSize="200" :loading="loading" v-if="system"></u-loading-page>
			
		<!-- #ifdef MP-WEIXIN -->
		<privacy ref="privacy" v-if="system"></privacy>
		<!-- #endif -->


	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl: 'common/cdnurl',
				system: 'common/system',
				ad: 'common/ad',
				color: 'common/color',
				color_value: 'common/color_value',
			})
		},
		data() {
			return {
				scrollTop: 0,
				keyword: '',
				banner: null,
				nav: null,
				temp: null,
				vote: null,
				page: 1,
				has_more: true,
				loading: true,
				arr:[
					"https://toupiao2.zuiyi.cc/uploads/20240409/6697d99a6b75c8fffff26ad5be91e7f1.jpg",
					"https://toupiao2.zuiyi.cc/uploads/20240409/c27f687f17aa2f00bacda34e858ab96e.jpg",
					"https://toupiao2.zuiyi.cc/uploads/20240409/852d9d2e12b5f5574a6846d6a555f74b.jpg",
					"https://toupiao2.zuiyi.cc/uploads/20240409/08207957b1bbe822a7e7e2a894d3633b.jpg"
				],
				nmb:0
			};
		},
		async onLoad() {
			await this.$onLaunched;
			// #ifdef MP-WEIXIN
			let isPrivacySetting = await this.$refs.privacy.getPrivacySetting("showPrivacy")
			if (isPrivacySetting) {
				this.utils.wxapp_login()
			}
			// 插屏广告
			this.adUtils.cp.load('index_cp')
			uni.$u.mpShare = {
				title: this.system.share_title,
				imageUrl: this.imgUrl + this.system.share_img
			}
			// #endif
			this.utils.share()
			uni.setNavigationBarTitle({
				title: this.$store.state.common.system.share_title
			});

			this.http('common/index', '', 'get').then(res => {
				this.banner = res.data.banner;
				this.nav = res.data.nav;
				this.loading = false;
			});

			this.ajax();
			this.nmb = Math.floor(Math.random() * 4)
			console.log(this.nmb);
		},
		onShow() {
			if (getApp().globalData.audio) {
				getApp().globalData.audio.destroy();
				getApp().globalData.audio = null;
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom: function() {
			if (this.has_more) {
				this.ajax();
			}
		},
		onPullDownRefresh: function() {
			this.keyword = '';
			this.vote = [];
			this.page = 1;
			this.has_more = true;
			this.ajax();
			uni.stopPullDownRefresh()
		},

		methods: {
			
			Search() {
				this.vote = [];
				this.page = 1;
				this.has_more = true;
				this.ajax();
			},
			ajax() {
				this.http('vote/index', {
					keyword: this.keyword,
					page: this.page
				}, 'get', false).then(res => {
					this.vote = this.vote || [];
					this.vote = this.vote.concat(res.data.data);
					this.page++;
					this.has_more = res.data.has_more;
					console.log(this.vote);
				});
			},
			link(link) {
				this.utils.link(link);
			},
			goto(id, mold) {
				if (mold < 3) {
					this.utils.goto('/pages/vote/index?vote_id=' + id);
				} else if (mold == 3) {
					this.utils.goto('/pages/vote/text?vote_id=' + id);
				} else if (mold == 4) {
					this.utils.goto('/pages/vote/pk?vote_id=' + id);
				}
			}
		}
	}
</script>

<style lang="scss">
	.index{
		width: 100%;
		height: 100%;
		// background-color: aqua;
		box-sizing: border-box;
		padding: 200rpx 30rpx;
		background:no-repeat left 65% / 100%;
		background-attachment: fixed;
	}
	.common {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: #fff;
		padding: 30rpx 30rpx 30rpx;

		.banner {
			width: 100%;
			height: 300rpx;
			border-radius: 30rpx;
			// #ifdef MP-WEIXIN
			margin: 140rpx 0 0;
			// #endif
			// #ifdef H5
			margin: 20rpx 0 0;

			// #endif
			swiper {
				width: 100%;
				height: 100%;

				.wx-swiper-dots-horizontal .wx-swiper-dot {
					width: 40rpx;
					height: 8rpx;
					border-radius: 5rpx;
				}

				swiper-item {
					width: 100%;
					height: 100%;

					.banner-img {
						width: 100%;
						height: 100%;
						border-radius: 30rpx;
						overflow: hidden;
					}
				}
			}
		}
	}

	.scroll-list {
		@include flex(column);
		margin-top: 10px;

		&__line {
			@include flex;
			margin-top: 10px;

			&__item {
				margin-right: 15px;

				&__image {
					width: 60px;
					height: 60px;
				}

				&__text {
					display: block;
					margin-top: 5px;
					color: $u-content-color;
					font-size: 12px;
					text-align: center;
				}

				&--no-margin-right {
					margin-right: 0;
				}
			}
		}
	}

	.vote_item {
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 15px;
		box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
		position: relative;

		&_end {
			position: absolute;
			right: 0;
			top: 0;
			background-color: rgba(0, 0, 0, 0.5);
			color: #fff;
			width: 70px;
			text-align: center;
			line-height: 30px;
			font-size: 12px;
		}

		.vote_img {
			width: 100%;
			display: block;
		}

		.vote_text {
			padding: 5px 10px 10px;
		}
	}

	.temp_list {
		@include flex();
		padding-bottom: 5px;

		&_item {
			@include flex;
			display: inline-block;
			width: 246rpx;
			margin-right: 20rpx;
			border-radius: 20rpx;
			overflow: hidden;
			text-align: center;
			box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);

			image {
				width: 100%;
				max-height: 160px;
			}

			view {
				font-size: 14px;
				color: $u-content-color;
				line-height: 35px;
			}
		}
	}
</style>
